<template>
  <div style="height: 100%">
    <div class="formCard-content">
      <Card :bordered="false" :dis-hover="true" :shadow="false" class="formCard">
        <div class="searchArea" >
          <Form ref="queryForm" :model="queryForm" :label-width="80" >
            <Row :gutter="40">
              <Col span="8" style="margin-bottom: 12px">
                <FormItem label="姓名"  prop="name" style="width: 100%">
                  <Input  type="text" :maxlength="100" v-model.trim="queryForm.name" placeholder="请输入姓名" style="width: 100%"></Input>
                </FormItem>
            </Col>
              <Col span="24" style="text-align: right;margin-top: 12px">
                <FormItem :label-width="0">
                  <Button   type="primary" @click="queryList(true)" style="margin-right: 8px">查询</Button>
                  <Button type="default"  @click="handleReset('queryForm')">重置</Button>
                </FormItem>
              </Col>
            </Row>
          </Form>
        </div>
      </Card>
      <Card :bordered="false" :dis-hover="true" :shadow="false" class="formCard">
        <div class="tableBtn">
          <Button  icon="md-add"  type="primary"  @click="handleAdd()">新增</Button>
          <Button  icon="ios-trash-outline" type="error"  @click="handleDeleteMultiple()" style="margin-left: 20px">删除</Button>
        </div>
        <Table  :columns="columns" :data="data" @on-selection-change="rowSelected($event)" style="">
          <template slot-scope="{ row, index }" slot="action">
            <Button type="text" size="small"  style="margin-right: 5px;color: #0056B5" @click="handleEdit(row,index)">编辑</Button>
            <Button  type="text" size="small" style="margin-right: 5px;color: #0056B5" @click="remove(row, index)">删除</Button>
          </template>
        </Table>
        <Page :total="pageData.total" :page-size="pageData.size" :current="pageData.page" show-elevator show-sizer show-total @on-page-size-change="changePage($event, 'size')" @on-change="changePage($event, 'page')" style="margin-top: 20px;"/>
      </Card>
    </div>
    <Modal
      v-model="modal"
      :title="title"
      ref="modal"
      @on-cancel="close"
      :width="580"
    >
      <Form ref="detail" :model="detail" :label-width="80" :rules="ruleValidate" style="margin-top: 20px">
        <FormItem label="姓名"  prop="name">
            <Input type="text" :maxlength="100" v-model.trim="detail.name" placeholder="请输入姓名" ></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary"  @click="ok(okFlag)" :disabled="disabled"  style="width: 80px">确定</Button>
        <Button type="default"  @click="close()"  style="width: 80px">取消</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  name: 'testManager',
  data () {
    return {
      nameDicGroups: [],
      modal: false,
      disabled: false,
      selectedArr: [],
      queryForm: {},
      pageData: {
        total: 0,
        size: 10,
        page: 1
      },
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          type: 'index',
          align: 'center',
          title: '序号',
          width: 80
        },
        {
          title: '操作',
          slot: 'action',
          width: 300,
          align: 'center'
        }
      ],
      data: [
      ],
      detail: {
      },
      okFlag: '',
      modalValid: true,
      ruleValidate: {
      }
    }
  },
  mounted () {
    this.queryList()
    this.nameGetDicGroups('judge')
  },
  computed: {
    title: function () {
      if (this.okFlag === 'add') {
        return '新增'
      } else {
        return '编辑'
      }
    }
  },
  methods: {
    nameGetDicGroups(judge){
         const [url, httpConfig] = [
            '/api/dic/cscpHxDicItems/getCscpBasicHxItemCode',
            {
              params: {
                // 'dicAttr.equals' : 'list',
                'dicCode' : 'judge'
              }
            }
         ]
         this.$http.get(url, httpConfig).then(response => {
            this.nameDicGroups = response.data.data
         })
    },
    nameTranslate(row) {
      if(!row.name){
        return row.name
      }
      let realGroupName
      for (let i = 0; i < this.nameDicGroups.length; i++) {
        if (row.name.toLocaleString() === this.nameDicGroups[i].itemCode.toLocaleString()) {
            realGroupName = this.nameDicGroups[i].itemValue.toLocaleString()
        }
      }
      if(realGroupName){
        return realGroupName
      }else{
        return row.name
      }
    },
    close () {
      this.modal = false
      this.$refs['detail'].resetFields()
      this.disabled = false
    },
    changePage (e, type) {
      if (type === 'size') {
        this.pageData.size = e
      } else if (type === 'page') {
        this.pageData.page = e
      }
      this.queryList()
    },
    handleAdd () {
      this.detail = {}
      this.okFlag = 'add'
      this.modal = true
    },
    handleEdit (row, index) {
       this.$http.get('/api/tests/' + row.id).then(res => {
       this.modal = true
       this.detail = res.data
        if(res.data.name){
            this.detail.name = res.data.name.toLocaleString()
        }
       this.okFlag = 'update'
       }).catch(() => {
        this.$Message.error('行数据查询失败')
       })
    },
    handleReset (name) {
      this.$refs[name].resetFields()
      this.selectedArr = []
      this.queryList()
    },
    rowSelected (e) {
      this.selectedArr = e
    },
    remove (row, index) {
      this.$Modal.confirm({
        title: '警告',
        content: '<p>确定删除这条数据？</p>',
        onOk: () => {
        this.$http.delete('/api/tests/' + row.id).then(res => {
            if (res.data.msg) {
            this.$Message.error(res.data.msg)
            return
            } else this.$Message.success('删除成功')
            this.queryList()
            }).catch(() => {
            this.$Message.error('删除失败')
            })
        },
        onCancel: () => {}
        })
    },
    ok (type) {
      this.$delete(this.detail, '')
      this.$delete(this.detail, '_rowKey')
      let copyDetail = JSON.parse(JSON.stringify(this.detail))

      this.$refs['detail'].validate((valid) => {
        if (valid) {
            if (type === 'update') {
                this.$http.put('/api/tests', copyDetail).then(res => {
                this.$Message.success('修改成功')
                this.modal = false
                this.queryList()
                this.$refs['detail'].resetFields()
                }).catch(() => {
                this.$Message.error('修改失败')
                })
            } else if (type === 'add') {
                this.$http.post('/api/tests', copyDetail).then(res => {
                this.$Message.success('新增成功')
                this.modal = false
                this.$refs['queryForm'].resetFields()
                this.queryList()
                this.$refs['detail'].resetFields()
                }).catch(() => {
                this.$Message.error('新增失败')
                })
            }
        } else {
            this.modal = true
        }
        })
    },
    queryList (flag) {
      if (flag) {
        this.pageData.page = 1
      }
      let obj = {}
      obj['name.contains'] = this.queryForm['name']  ?  this.queryForm['name']: null
      let params = Object.assign(obj, {
        page: this.pageData.page - 1,
        size: this.pageData.size,
      })
      this.$http.get('/api/tests/', {
        params: params
        }).then(res => {
            this.data = res.data.data
            this.pageData.total = res.data.recordsTotal
        }).catch(() => {
        this.$Message.error('列表查询失败')
        })
    },
    handleDeleteMultiple: function () {
      let arr = this.selectedArr.map(item => item.id)
      if (arr.length < 1) {
        return this.$Message.error('删除失败,当前选择列表为空！')
      }
      this.$Modal.confirm({
        title: '警告',
        content: '<p>确定删除勾选的数据？</p>',
        onOk: () => {
        this.$http.delete('/api/tests/delAll?ids=' + arr).then(res => {
            this.$Message.success('删除成功')
            this.queryList()
            }).catch(error => {
            if (error.response) {
            this.$Message.error(error.response.data.title ? error.response.data.title : '删除失败！')
            }
            })
        },
        onCancel: () => {
        }
      })
    }
  }
 }
</script>

<style lang="less" scoped>
   @import "~@/views/admin/styles/formStyle.less";
</style>
